<!--
 @description 主页
 @fileName index.vue
 @author zengqiongying
 @created 2022/12/25 10:33:33
-->
<template>
  <div class="app-home-page">
    <MineHeader id="oHeader" :bg-color="headerBarBgColor" show-statusbar :show-placeholder="bannerData.length>0?false:true">
      <SearchInput class="app-home-search" placeholder="搜索" @focus="handleSearch" />
    </MineHeader>
    <div v-if="floorList.length>0" class="app-home-list">
      <div class="home-relative-content">
        <BannerList v-if="bannerData.length>0" ref="banner" :list="bannerData" />
        <NavList :list="navData" />
      </div>
      <div v-for="(g,i) in fastEntrance" :key="i" class="floor-group">
        <div v-if="[1,'1'].includes(g.isShowTitle)" class="group-title">
          <span class="name">{{ g.name }}</span>
          <img v-if="g.logoPic" class="icon" :src="getImageUrl(g.logoPic)">
          <div class="more">
            <span v-if="!!(g.gotoType)" @click="handleToDetail(g)">
              更多
              <svg-icon icon-class="xiangyou" />
            </span>
          </div>
        </div>
        <ScrollFloor v-if="g.layOut==='oneRowScroll'" :list="g.detailDTOList" :layout-type="g.layOut" />
        <FloorItem v-else :list="g.detailDTOList" :layout-type="g.layOut" />
      </div>
    </div>
    <Tabbar @refresh="refreshPage" />
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar'
import SearchInput from '@/components/SearchInput'
import MineHeader from '@/components/MineHeader'
import { getHomeFloorPage } from '@/apis/index'
import BannerList from './Banner'
import NavList from './Nav'
import ScrollFloor from './ScrollFloor'
import FloorItem from './FloorItem'
export default {
  name: 'HomeIndex',
  components: { Tabbar, SearchInput, MineHeader, BannerList, NavList, FloorItem, ScrollFloor },
  data() {
    return {
      imgHost: `${process.env.VUE_APP_STATIC}`,
      floorList: [],
      isListen: false,
      barOpacity: 0
    }
  },

  computed: {
    bannerData() {
      const floor = this.floorList.find(v => v.type === 'home_page_banner')
      return (floor && floor.detailDTOList) || []
    },
    navData() {
      const floor = this.floorList.find(v => v.type === 'home_page_navigation')
      return (floor && floor.detailDTOList) || []
    },
    fastEntrance() {
      return this.floorList.filter(v => v.type === 'home_page_fast_entrance')
    },
    headerBarBgColor() {
      if (this.barOpacity > 0) {
        return `rgba(255, 255, 255, ${this.barOpacity})`
      } else {
        return 'transparent'
      }
    }
  },

  created() {
    this.getContent()
  },
  beforeDestroy() {
    this.removeEventListener()
  },
  activated() {
    this.addEventListener()
  },
  deactivated() {
    this.removeEventListener()
  },
  mounted() {
    this.addEventListener()
  },

  methods: {
    refreshPage(name) {
      if (this.$route.name === name) {
        this.getContent()
      }
    },
    getImageUrl(url) {
      return this.$formatURL(url, this.imgHost)
    },
    getContent() {
      getHomeFloorPage().then(res => {
        this.floorList = (res.data && res.data.records) || []
      })
    },
    handleToDetail(data) {
      data.routerTitle = data.name
      this.$gotoPage(data, this.$router)
    },
    handleSearch() {
      this.$router.push({
        path: '/search/product'
      })
    },

    addEventListener() {
      if (this.isListen) {
        return
      }
      this.isListen = true
      window.addEventListener('scroll', this.ScrollPage, { passive: true })
    },
    removeEventListener() {
      if (!this.isListen) return
      this.isListen = false
      window.removeEventListener('scroll', this.ScrollPage, { passive: true })
    },
    ScrollPage(e) {
      if (this.bannerData.lengh === 0) return
      const headerEl = document.querySelector(`#oHeader`)
      if (headerEl) {
        let height = 0
        if (this.$refs.banner) {
          height = this.$refs.banner.$el.offsetHeight
        }
        const top = headerEl.getBoundingClientRect().top
        if (top >= 0 || (Math.abs(top) < height - 100)) {
          this.barOpacity = 0
          return
        }
        let barOpacity = 1 - (top + 44) / 44
        if (barOpacity > 1) barOpacity = 1
        this.barOpacity = barOpacity
      }
    }
  }
}

</script>
<style lang='less' scoped>
.app-home-page{
  // padding-top: 44PX;
  padding-bottom: 50px;
  min-height: 100vh;
  box-sizing: border-box;
  background: #F9F9F9;
}
.app-home-search{
  flex: 1;
  margin-right: 16px;
  height: 30px;
  // background: rgba(189, 188, 194, 0.2);
  background: #f2f1f3;
  border-radius: 18px;
  position: relative;
  /deep/ .search{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    margin-left: -20px;
  }
  /deep/.search-value{
    background: transparent;
    text-align: center;
    font-size: 14px;
    padding-left: 10px;
  }
}
.app-home-list{
  width: 100%;
  padding-bottom: 14px;
  .home-relative-content{
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 24px;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px rgba(58,67,84,0.08);
    border-radius: 0px 0px 10px 10px;
  }
  .floor-group{
    margin-top: 8px;
    .group-title{
      margin:8px 0 16px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .more{
        margin-left: auto;
        >span{
          color: #BDBCC2;
          font-size: 12px;
          display: flex;
          align-items: center;
          .svg-icon{
            width: 16px;
            height: 16px;
          }
        }
      }
      .name{
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        line-height: 25px;
        margin-right: 4px;
      }
      .icon{
        // width: 40px;
        height: 18px;
        border-radius: 6px;
        object-fit: cover;
      }
    }
  }
}
</style>
